<template>
  <div class="group">
    <div class="item jian" @click="jian">
        <span :class="{active:value === 1}">-</span>
    </div>
    <div><input type="number" min='1' v-model="value"></div>
    <div class="item jia" @click="jia"><span>+</span></div>
    <div style="clear:both;"></div>
  </div>
</template>

<script>
export default {
    name:'InputNum',
    data() {
        return {
            value:1
        }
    },
    methods: {
        jian(){
            this.value--
            if (this.value < 1) {
                this.value = 1
            }
        },
        jia(){
            this.value++
        }
    },
}
</script>

<style scoped>
    .active{
        opacity: 0.4;
    }
    .active:hover{
        color: gray;
        opacity: 0.4;
        cursor: not-allowed;
    }
    *,button,input,div{
        padding: 0;
        margin: 0;
    }
    input[type='number'] {  
        -moz-appearance:textfield;  
        width: 60px;
        height: 35px;
        text-align: center;
        outline: none;
        border: 1px solid gray;
        cursor: pointer;
    }  
    input[type='number']::-webkit-inner-spin-button,  
    input[type='number']::-webkit-outer-spin-button {  
        -webkit-appearance: none;  
        margin: 0;  
    } 
    input[type='number']:focus{
        border: 1px solid #C69C6C;
    }
    .group > div{
        float: left;
    }
    .group{
        display: inline-block;
        user-select: none;
    }
    .item{
        height: 35px;
        width: 35px;
        font-size: 24px;
        font-family: '宋体';
        border-top: 1px solid gray;
        border-bottom: 1px solid gray;
        background: #F4F3F1;
        text-align: center;
        cursor: pointer;
    }
    span{
        line-height: 35px;
    }
    span:hover{
        color: #C69C6C;
    }
    .jian{
        border-left: 1px solid gray;
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
    }
    .jia{
        border-right: 1px solid gray;
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
    }
</style>